<template>
	<view style="display: flex;flex-direction: column;height: 100vh;">
		<view class="top-group-view" :style="'background-image: url('+baseImageUrl+'/material/img_material_top.png);'">
			<view class="top-title-view" :style="'height:'+navigationBarHeight+'px;margin-top:'+iStatusBarHeight+'px;'">
				<text class="top-title">热门素材</text>
			</view>
			<view style="width: 100vw;display: flex;margin-top: 5px;margin-bottom: 4px;">
				<view class="search-group">
					<image src="../../static/material/ic_search.png" style="width: 28rpx;height: 28rpx;margin-left: 32rpx;"></image>
					<input class="input-box-view" v-model="keyword" @confirm="formSubmit" confirm-type="search" type="text" placeholder="搜索"  placeholder-class="placeholder-view"  />
				</view>
				<text class="search-btn" @click="formSubmit()">搜索</text>
			</view>
			<!-- 选项卡头部 -->
			<view style="display: flex;align-items: center;">
				<scroll-view class="tab" scroll-x="true"  :scroll-left="scrollLeft" >
					<block v-for="(item,index) in tabData" :key="index" >
						<!-- 标签动态样式 -->
						<view class="tab-item" :class=" [currentTab==index ? 'active' : 'none'] " :data-current="index" @click="clickTab">
							{{item.name}}
						</view>
					</block>
				</scroll-view>
				<!-- <image src="../../static/material/ic_arrange.png" class="arrange-image"></image> -->
			</view>
		</view>
		<view :style="'margin-top: '+navHeight+'px;'" style="position: fixed;">
			<image :src="baseImageUrl + '/material/img_material_bottom.png'" class="smegma-view"><image>
		</view>
		<view>
			<mescroll-uni ref="mescrollRef" :top="navHeight*2" :fixed="true" @init="mescrollInit" :up="upOption" @up="upCallback" @down="downCallback">
				<view v-for="(item, index) in goodsList" :key="index" :id="index">
					<view class="list-info">
						<image :src="item.productInfo.cover" class="goods-item-img" mode="aspectFill"></image>
						<view style="display: flex;flex-direction: column;flex: 1;margin-right: 32rpx;">
							<view class="goods-item-title">{{item.productInfo.title}}</view>
							<view style="display: flex;margin-top: 8rpx;font-size: 24rpx;">
								<text style="color: #666666;">高佣{{item.productInfo.kolCosRatio}}%</text>
								<text style="color: #666666;margin-left: 20rpx;flex: 1;">公开{{item.productInfo.cosRatio}}%</text>
								<text style="color: #999999;">月售 {{item.productInfo.sales}}</text>
							</view>
							<view style="display: flex;margin-top: 16rpx;font-size: 24rpx;">
								<text style="color: #666666;margin-top: 4rpx;">预估赚</text>
								<text style="color: #EE0A24;font-size: 24rpx;margin-left: 4rpx;margin-top: 4rpx;">¥</text>
								<text style="color: #EE0A24;flex: 1;font-size: 28rpx;">{{item.productInfo.kolCosFee}}</text>
								<text style="color: #999999;margin-top: 4rpx">售价：¥{{item.productInfo.price}}</text>
							</view>
							<view style="display: flex;margin-top: 14rpx;margin-bottom: 16rpx;">
								<view style="flex: 1;"></view>
								<text class="receive-material-btn" @click="toMaterialDetail(item.id)">领取素材</text>
								<text class="copy-link-btn" @click="copyLinkUrl(item.productInfo.url)">复制链接</text>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import configUrls from '@/common/config.js';
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				baseImageUrl: configUrls.baseImageUrl,
				iStatusBarHeight: 0,
				navigationBarHeight: 0,
				navHeight: 0,
				tabData:[
					{id:0,name:"全部",vaule:""}
				],
				currentTab: 0, 
				scrollLeft: 0,
				windowWidth: 0,
				upOption:{
					noMoreSize: 10, //默认5
					empty:{
						icon: '/static/mine/img_manage_empty.png',
						tip: '没有素材', // 提示
					},
					textNoMore: '~ 没有更多素材 ~'
				},
				goodsList: [],
				chooseMaterialType: '',
				keyword: '',
				isPullDownRefresh: false,
			}
		},
		onReady() {
		    this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;	
			const customHeight = wx.getMenuButtonBoundingClientRect();
			this.navigationBarHeight = customHeight.height + (customHeight.top - this.iStatusBarHeight) * 2;
			this.navHeight = this.iStatusBarHeight + this.navigationBarHeight + 83;
		},
		onLoad() {
		   	wx.getSystemInfo({ 
		   		success: (res) => {	
		   			this.windowWidth = res.windowWidth;
		   		}
		   	});
			this.getClassification();
		},
		methods: {
			upCallback(page) {
				console.log('==>')
				var that = this;
				this.$Request.postJson(configUrls.getMaterialList, {
					page: page.num,
					limit: 10,
					type: that.chooseMaterialType,
					keywords: that.keyword,
				}).then(res => {
					if (res.code == "10000") {
						const respData = res.data.result.data;
						if (respData == null) {
							that.mescroll.endSuccess(0);
						    return;
						}
						that.mescroll.endSuccess(respData.length);
						if(page.num == 1) that.goodsList = []; 
						that.goodsList=that.goodsList.concat(respData);
					} else {
						that.goodsList = [];
						that.mescroll.endSuccess(0);
						that.mescroll.endErr();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}); 
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			toMaterialDetail(id) {
				uni.navigateTo({
					url: '/pages/material/materialDetail?id='+id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			formSubmit(e) {
				this.mescroll.resetUpScroll();
			},
			clickTab(e) {
				let clickIndex = e.target.dataset.current;			
				let singleNavWidth = this.windowWidth / 5;  		
				this.scrollLeft = (clickIndex - 2) * singleNavWidth;
				this.currentTab = clickIndex;
				this.chooseMaterialType = this.tabData[clickIndex].value;
				this.mescroll.resetUpScroll();
			},
			getClassification() {
				let that = this;
				this.$Request.postJson(configUrls.classification, {
				}).then(res => {
					if (res.code == "10000") {
						this.tabData = [{id:0,name:"全部",vaule:""}];
						that.tabData = that.tabData.concat(res.data.result);
					} 
				}); 
			},
			copyLinkUrl(url){
				uni.setClipboardData({
					data: url,
					success: function () {
					    uni.showToast({
					        title: "链接复制成功",
					        icon: 'none',
							duration: 2000
					    });
					}
				});
			},
		}
	}
</script>

<style>
	@import url("../../css/material/material.css");
</style>
